<template>
    <div class="tab-bar">
      <div 
        v-for="(item, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ active: active === index }" 
        @click="handleClick(index)"
      >
        <van-icon :name="item.icon" />
        <span>{{ item.text }}</span>
      </div>
    </div>
  </template>
  
  <script>
  import { Icon } from 'vant';
  
  export default {
    components: {
      'van-icon': Icon
    },
    props: {
      active: {
        type: Number,
        default: 0
      },
      tabs: {
        type: Array,
        default: () => [
          { icon: 'home-o', text: '首页', name: 'home' },
          { icon: 'search', text: '搜索', name: 'search' },
          { icon: 'friends-o', text: '分类', name: 'category' },
          { icon: 'shopping-cart-o', text: '购物车', name: 'gouwuche' }
        ]
      }
    },
    methods: {
      handleClick(index) {
        this.$emit('update:active', index);
        this.$router.push({ name: this.tabs[index].name });
      }
    }
  };
  </script>
  
  <style scoped>
  .tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 10px 0;
  }
  
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }
  
  .tab-item.active {
    color: #1989fa;
  }
  </style>